<template>
    <div class="employee-index">
        <div class="employee-header">
            <div class="employee-search">
                <p>轮播图查询：</p>
                <el-input v-model="pageParams.name" style="width: 200px; height: 36px;" placeholder="请输入请填写轮播图名称" prefix-icon="Search" />
                <p>状态：</p>
                <el-dropdown>
                    <el-button style="width: 70px;">
                        {{ altogether }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="selectAction('启用')">启用</el-dropdown-item>
                            <el-dropdown-item @click="selectAction('停用')">停用</el-dropdown-item>
                            <el-dropdown-item @click="selectAction('全部')">全部</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-button style="margin-left: 10px; height: 36px;" type="warning" color="#000" round @click="pageQuery">查询</el-button>
            </div>
            <div class="employee-chart">
                <el-button style="height: 36px;" type="success" color="#000" @click="openDialog">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加轮播图
                </el-button>
                <AddBanners :modelValue="dialogFormVisible" :transfer-id="transferIdToUpdate" 
                    @update:modelValue="dialogFormVisible = $event"
                    @update:transferId="transferIdToUpdate = null" 
                    @refresh="pageQuery" />
            </div>
        </div>
        <div class="employee-table">
            <el-table :data="records" stripe height="500" style="width: 100%">
                <el-table-column prop="name" label="轮播图名称" width="200" align="center">
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="180">
                </el-table-column>
                <el-table-column label="图片" width="180" align="center">
                    <template v-slot:default="scope">
                        <el-image :src="scope.row.image" style="width: 50px; height: 50px" />
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template v-slot="scope">
                        · {{ scope.row.status === 0 ? '禁用' : '启用' }}
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最后操作数据" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button link type="primary" class="text-danger"
                            @click="handleDeleteDmp(scope.row)">删除</el-button>
                        <el-button link type="primary" @click="handleUpdateEmp(scope.row)">修改</el-button>
                        <el-button link type="primary" :class="{ 'text-danger': scope.row.status === 1 }"
                            @click="handleStartOrStop(scope.row)">{{ scope.row.status === 1 ? '禁用' :
                                '启用' }}</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageList" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageParams.total">
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getBanners, updateBannersStatus, deleteBannersById } from '@/api/banners.js';
import AddBanners from './components/addBanners.vue';

const dialogFormVisible = ref(false)
const openDialog = () => {
    dialogFormVisible.value = true;
};
const transferIdToUpdate = ref(null);
// 修改 
const handleUpdateEmp = (row) => {
    transferIdToUpdate.value = row.id; // 设置要修改的员工 ID
    dialogFormVisible.value = true; // 打开对话框

}

// 分页参数
const pageParams = ref({
    name: '',// 名称
    status: null, // 状态
    page: 1, // 当前页
    pageSize: 10, // 每页显示条数
    total: 0 // 总条数
})
const altogether = ref('全部')

// 表格数据
const records = ref([])


const handleStartOrStop = (row) => {

    const newStatus = row.status === 1 ? 0 : 1; // 切换状态
    const actionMessage = newStatus === 0 ? '禁用' : '启用'; // 根据状态决定消息

    updateBannersStatus({ id: row.id, status: newStatus }).then(res => {
        if (res.code === 1) {
            ElMessage.success(`账号${actionMessage}成功！`)
            pageQuery()
        } else {
            ElMessage.error(`账号${actionMessage}失败！`)
        }
    }).catch((err) => {
        console.log(err);
        ElMessage.error(`操作失败，请稍后再试！`)
    })
}

function selectAction(action) {
    altogether.value = action;
    if (action === '全部') {
        pageParams.value.status = null
    } else if (action === '启用') {
        pageParams.value.status = 1
    } else if (action === '停用') {
        pageParams.value.status = 0
    }
}

// 处理分页逻辑
const handleSizeChange = (newSize) => {
    pageParams.value.pageSize = newSize
    pageParams.value.pageSize = newSize
    pageQuery()
}

// 处理当前页逻辑
const handleCurrentChange = (newPage) => {
    pageParams.value.page = newPage
    pageParams.value.page = newPage
    pageQuery()
}

onMounted(async () => {
    pageQuery()
})

function pageQuery() {
    getBanners(pageParams.value).then(res => {
        // console.log(res);
        pageParams.value.total = res.data.total
        records.value = res.data.records
    })
}

const handleDeleteDmp = (row) => {
    console.log('删除部门:', row)
    
    ElMessageBox.confirm('确定删除该轮播图吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // console.log('点击了确定')
        deleteDepartment(row.id)
    }).catch(() => {
        // console.log('点击了取消')
    })
}

function deleteDepartment(id) {
    // console.log('删除部门:', id)
    ElLoading.service({
        lock: true,
        text: '正在删除中...'
    })
    deleteBannersById(id).then(res => {
        console.log(res)
        ElLoading.service().close()
        if (res.code === 1) {
            ElMessage.success('删除轮播图成功！')
            pageQuery()
        } else {
            ElMessage.error('删除轮播图失败！')
        }
    }).catch(err => {
        console.log(err)
        ElLoading.service().close()
        ElMessage.error('删除轮播图失败！')
    })
}


</script>

<style lang="scss">
.employee-index {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .employee-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .employee-search {
            display: flex;
            align-items: center;

            p {
                margin-right: 10px;
                margin-left: 10px;
                font-size: 18px;
            }

            .el-input {
                margin-right: 10px;
            }

        }

        .employee-chart {

            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-icon {
                font-size: 16px;
                margin-bottom: 3px;
                padding-right: 3px;
            }
        }
    }

    .employee-table {
        // width: 100%;
        padding: 10px;

        .text-danger {
            color: red; // 设置文本颜色为红色
        }
    }

    .pageList {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>